import React, {useEffect, useRef, useState} from "react";
import {Modal, Input} from "antd";
import SimpleSelect from "../SimpleSelect";
import {Controlled as CodeMirror} from "react-codemirror2";
import PropTypes from "prop-types";

function PageEditModal(props) {

    const {rule, visible, dismiss, save, colTypes} = props;
    const editorRef = useRef();
    const [ruleDetail, setRuleDetail] = useState(rule || {});

    function saveRule() {
        const r = {...ruleDetail};
        save(r);
    }

    function onChange(key, v) {
        const r = {...ruleDetail};
        r[key] = v;
        setRuleDetail(r);
    }

    useEffect(() => {
        if (rule != null) {
            if (editorRef.current != null) {
                editorRef.current.refresh();
            }
            setRuleDetail(rule);
        }
    }, [rule]);

    function onCursorActivity(editor) {
        editor.showHint();
    }

    const codeMirrorOpt = {
        lineNumbers: true,
        lineWrapping: true,
        smartIndent: true,
        mode: {name: "javascript"},
        matchBrackets: true,
        autoCloseBrackets: true,
        showHint: true,
        indentWithTabs: true,
        extraKeys: {Tab: 'autocomplete'},
        hintOptions: {
            completeSingle: false,
        },
    };
    return (
        <Modal title={"编辑子页面"}
               visible={visible}
               width={"75%"}
               onCancel={dismiss}
               onOk={saveRule}
        >
            <div className={"mail-edit-head-bg"}>
                <h3 className={"head-title"}>子页面名称：</h3>
                <Input.TextArea
                    className={"mail-input"}
                    autoSize={{minRows: 1, maxRows: 1}}
                    value={ruleDetail.name}
                    onChange={(e) => onChange("name", e.target.value)}/>
            </div>
            <div className={"mail-edit-head-bg"}>
                <h3 className={"head-title"}>子页面标识：</h3>
                <Input.TextArea
                    className={"mail-input"}
                    autoSize={{minRows: 1, maxRows: 1}}
                    value={ruleDetail.path}
                    onChange={(e) => onChange("path", e.target.value)}/>
            </div>
            <div className={"mail-edit-head-bg"}>
                <h3 className={"head-title"}>显示样式：</h3>
                <SimpleSelect
                    types={colTypes}
                    value={ruleDetail.col_type}
                    onSelect={v => onChange("col_type", v)}
                />
            </div>
            <div className={"mail-edit-head-bg"}>
                <h3 className={"head-title"}>解析规则：</h3><span>（列表;标题;图片;描述;链接）</span>
                <div className={"code-mirror-bg"}>
                    <CodeMirror
                        onCursorActivity={onCursorActivity}
                        className={"code-mirror"}
                        value={ruleDetail.rule}
                        options={codeMirrorOpt}
                        onBeforeChange={(editor, data, value) => onChange("rule", value)}
                        editorDidMount={editor => {
                            editorRef.current = editor;
                        }}
                    />
                </div>
            </div>
        </Modal>
    )
}

PageEditModal.propTypes = {
    rule: PropTypes.object,
    visible: PropTypes.bool,
    dismiss: PropTypes.func,
    save: PropTypes.func,
    colTypes: PropTypes.array,
}

export default PageEditModal;